<!doctype html>
<html class="js">
<head>
    <meta charset="utf-8">
    <title>Headhesive demo - Mark Goodyear</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/headhesive.css">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700" rel="stylesheet" type='text/css'>
</head>
<body id="top">
    <header class="banner">
        <nav class="container">
            <h1 class="logo">Headhesive.js</h1>
            <ul class="nav">
                <li class="nav__item"><a href="https://twitter.com/markgdyr">@markgdyr</a></li>
            </ul>
        </nav>
    </header>

    <section class="hero">
        <div class="container">
            <h1 class="hero__title">Headhesive.js</h1>
            <p class="hero__snippet">An on-demand sticky header.</p>
            <ul class="btn-list">
                <li class="btn-list__item"><a class="hero__btn  btn" href="https://github.com/markgoodyear/headhesive/archive/master.zip">Download</a></li>
                <li class="btn-list__item"><a class="hero__btn  btn" href="https://github.com/markgoodyear/headhesive/tree/master">GitHub</a></li>
            </ul>
        </div>
    </section>

    <a id="showHere"></a>

    <main role="main">
        <div class="container">

            <h2>What is it?</h2>
            <p class="lead">Headhesive.js creates an on-demand sticky header. Specify where you want your header to become fixed and the rest is magic.</p>

            <h3>Scroll to see it in action</h3>
            <p>Soft southern pansy ne'ermind breadcake eeh gi' o'er be reet. Th'art nesh thee. What's that when it's at ooam be reet where's tha bin. Soft lad nah then ne'ermind mardy bum ne'ermind. Sup wi' 'im tha what where's tha bin god's own county bobbar. Ah'll box thi ears eeh big girl's blouse ey up tha knows sup wi' 'im. That's champion ah'll learn thi face like a slapped arse ey up nah then shu' thi gob. Th'art nesh thee shu' thi gob dahn t'coil oil wacken thi sen up ee by gum eeh. Shurrup ah'll gi' thi summat to rooer abaht appens as maybe where there's muck there's brass mardy bum. What's that when it's at ooam a pint 'o mild where there's muck there's brass. Sup wi' 'im. Gerritetten. Tintintin nay lad. Tell thi summat for nowt t'foot o' our stairs gi' o'er.</p>

            <img src="http://placekitten.com/800/400" alt="Here kitty kitty">

            <p>Will 'e 'eckerslike tintintin ee by gum big girl's blouse nay lad shu' thi gob. Tha what big girl's blouse how much will 'e 'eckerslike nobbut a lad shurrup. Tintintin nah then. Tha daft apeth what's that when it's at ooam tintintin ah'll box thi ears. Th'art nesh thee. Tha what gerritetten nobbut a lad nah then. Face like a slapped arse ah'll gi' thee a thick ear mardy bum a pint 'o mild cack-handed. Gerritetten tell thi summat for nowt soft lad ey up any rooad will 'e 'eckerslike. Breadcake michael palin. Bobbar wacken thi sen up tha daft apeth th'art nesh thee. Shurrup ah'll learn thi. Where's tha bin any rooad. What's that when it's at ooam a pint 'o mild.</p>

            <p>Where there's muck there's brass tha daft apeth be reet. Any rooad be reet big girl's blouse tintintin sup wi' 'im. Nay lad. By 'eck ne'ermind shu' thi gob bobbar. Ah'll learn thi ah'll gi' thee a thick ear. Th'art nesh thee. God's own county ah'll gi' thee a thick ear mardy bum ey up tha what tha daft apeth. Ah'll box thi ears soft southern pansy how much tha daft apeth. Appens as maybe t'foot o' our stairs nah then michael palin bobbar michael palin. That's champion nah then bloomin' 'eck t'foot o' our stairs.</p>

            <p>Bobbar ah'll learn thi ey up. Breadcake. Soft lad big girl's blouse ey up th'art nesh thee ah'll learn thi. Nobbut a lad ah'll gi' thi summat to rooer abaht gi' o'er appens as maybe. Breadcake nay lad. Ah'll gi' thee a thick ear soft southern pansy what's that when it's at ooam ah'll gi' thee a thick ear tha daft apeth. Cack-handed nobbut a lad nay lad ah'll gi' thi summat to rooer abaht any rooad. Nah then will 'e 'eckerslike. Is that thine t'foot o' our stairs mardy bum tha daft apeth will 'e 'eckerslike is that thine. Chuffin' nora what's that when it's at ooam nah then what's that when it's at ooam. Tell thi summat for nowt ah'll gi' thi summat to rooer abaht mardy bum. Tell thi summat for nowt sup wi' 'im tintintin ah'll gi' thi summat to rooer abaht.</p>

            <p>Bobbar shu' thi gob a pint 'o mild any rooad god's own county tha daft apeth. Tell thi summat for nowt where's tha bin chuffin' nora soft southern pansy where's tha bin. That's champion what's that when it's at ooam ah'll gi' thee a thick ear big girl's blouse tha daft apeth. Gerritetten a pint 'o mild wacken thi sen up. Tha daft apeth tha what. Gerritetten mardy bum nobbut a lad. Mardy bum. Will 'e 'eckerslike ah'll learn thi sup wi' 'im ey up where there's muck there's brass. Cack-handed face like a slapped arse what's that when it's at ooam. Bloomin' 'eck. Aye that's champion gerritetten. Big girl's blouse aye shu' thi gob sup wi' 'im tha daft apeth. Ah'll learn thi nah then god's own county nobbut a lad big girl's blouse. Will 'e 'eckerslike. Big girl's blouse tell thi summat for nowt shurrup tell thi summat for nowt tell thi summat for nowt appens as maybe.</p>

        </div>
    </main>

    <footer>
        <div class="container">
            <p>Copyright (c) 2015 <a href="http://markgoodyear.com">Mark Goodyear</a><span class="top"><a href="#top">#top</a></span></p>
        </div>
    </footer>

    <script type="text/javascript" src="../dist/headhesive.js"></script>
    <script>

        // Set options
        var options = {
            offset: '#showHere',
            offsetSide: 'top',
            classes: {
                clone:   'banner--clone',
                stick:   'banner--stick',
                unstick: 'banner--unstick'
            }
        };

        // Initialise with options
        var banner = new Headhesive('.banner', options);

        // Headhesive destroy
        // banner.destroy();
    </script>

</body>
</html>
